/*
 *@description:登录页
 *@Author:@reynold
 *@Date:2025-03-25 09:03:37
 *@Update:2025-03-25 09:03:37
 *@Version: V1.0.0
*/
<template>
  <div class="login_box">
    <div class="login_form">
      <!-- 系统名称 -->
      <div class="login_title">易洁家政系统</div>
      <div class="login_form_box">
        <!-- 用户名 密码 登录 / 注册页面 -->
        <van-form @submit="onSubmit">
          <van-field v-model="userForm.username" name="用户名" label="用户名" placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="userForm.password" type="password" name="密码" label="密码" placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]" />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
        <div @click="toSign" class="regiter_box">没有账号？去注册</div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/user'
export default {
  data() {
    return {
      userForm: {
        username: 'admin',
        password: '123456'
      }
    }
  },
  methods:{
    onSubmit() {
      login(this.userForm).then(res=>{
        console.log(res);
        sessionStorage.setItem('token', res.data.token)
        this.$notify({ type: 'success', message: res.data?.message ? res.data.message : '登录成功' });
        this.$router.push('/home/main')
      }).catch(err=>{
        this.$notify({ type: 'warning', message: err?.response?.data?.message ? err.response.data.message : '登录失败' });
      })
      // 发送请求登录
      // if(this.userForm.username == 'admin' && this.userForm.password == '123456'){
      //   // 设置token
      //   sessionStorage.setItem('token', 'admin')
      //   this.$notify({ type: 'success', message: '登录成功' });
      //   this.$router.push('/home/main')
      // }else{
      //   this.$notify({ type: 'warning', message: '用户名或密码错误' });
      // }
    },
    // 跳转到注册页面
    toSign(){
      this.$router.push('/register')
    }
  }
}
</script>
<style scoped>
.login_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/bg.jpg');
  background-size: cover;
  background-position: center;
}
.login_form {
  width: 80%;
  height: 45%;
  background-color: rgba(207, 148, 65, 0.5);
  border-radius: 10px;
}

.login_title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
.login_form_box .van-cell {
  color: #fff;
  margin-top: 20px;
  background-color: inherit;
}

.regiter_box {
  width: 100%;
  text-align: center;
  color: rgb(6, 215, 41);
}
</style>